<!DOCTYPE html>
<html class="echarts-bg">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link href="../css/bootstrap.min14ed.css" rel="stylesheet">
  <link href="../css/style.min862f.css" rel="stylesheet">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../plugins/UpDownSlider/liMarquee.css">
  <!-- import JavaScript -->
  <script src="../plugins/ECharts/echarts-4.1.0.js"></script>
  <script src="../plugins/ElementUI/vue-2.5.16.js" type="text/javascript"></script>
  <script src="../plugins/ElementUI/index-2.3.9.js" type="text/javascript"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
  <!-- 百度全国地图 -->
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
</head>
<body class="gray-bg echarts">
  <div id="tbb" v-cloak class="animated fadeInRight">
    <div class="row echarts-head">
        <p class="echarts-head-text">新能源汽车监控系统</p>
        <p class="echarts-head-hover">
          <img class="echarts-head-hover-img" :src="srcU" @click="fullChange">
        </p>
    </div>
   <div class="wrapper wrapper-content">
        <div class="row">
          <div class="col-md-8">
            <div class="row">
                <div class="col-md-12">
                    <div class="echarts-box" id="resizeMap">
                        <div class="echarts-title">
                          <div class="echarts-2-b">
                            <div class="echarts-title-content">地区车辆分布图</div>
                          </div>
                        </div>
                        <div class="echarts-box-content">
                            <div id="map"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="echarts-box" id="resizePie">
                      <div class="echarts-title">
                        <div class="echarts-2-b">
                          <div class="echarts-title-content">一周车辆上线率</div>
                        </div>
                      </div>
                      <div class="echarts-box-content">
                          <div id="bar"></div>
                      </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="echarts-box">
                        <div class="echarts-title">
                          <div class="echarts-2-b">
                            <div class="echarts-title-content">车辆实时在线数量</div>
                          </div>
                        </div>
                        <div class="echarts-box-content">
                            <div id="line"></div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="row">
                <div class="col-md-12">
                  <div class="echarts-box">
                      <div class="echarts-title">
                        <div class="echarts-2-b">
                          <div class="echarts-title-content">车辆总体信息</div>
                        </div>
                      </div>
                      <div class="echarts-box-content" style="padding: 20px 30px;">
                        <div class="carCountInfo">
                          <div class="carCountInfo-item">
                            <div class="carCountInfo-item-in">
                              <div class="item-ico aount-car"></div>
                              <div class="item-count dt-flex">
                                <div class="item-count-style">
                                  <p class="item-count-title">入网车辆总数（辆）</p>
                                  <p class="item-count-num">{{WSData.totalVehicleCount?WSData.totalVehicleCount:'0.00'}}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="carCountInfo-item">
                            <div class="carCountInfo-item-in">
                              <div class="item-ico aount-time"></div>
                              <div class="item-count dt-flex">
                                <div class="item-count-style">
                                <p class="item-count-title">正在充电数量（辆）</p>
                                <p class="item-count-num">{{WSData.chargeVehicleCount?WSData.chargeVehicleCount:0}}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="carCountInfo-item">
                            <div class="carCountInfo-item-in">
                              <div class="item-ico aount-km"></div>
                              <div class="item-count dt-flex">
                                <div class="item-count-style">
                                <p class="item-count-title">总里程（公里）</p>
                                <p class="item-count-num">{{WSData.totalMileage?WSData.totalMileage:'0.00'}}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="carCountInfo-item">
                            <div class="carCountInfo-item-in">
                              <div class="item-ico aount-online"></div>
                              <div class="item-count dt-flex">
                                <div class="item-count-style">
                                <p class="item-count-title">车辆在线率（%）</p>
                                <p class="item-count-num">{{WSData.onlineRate?WSData.onlineRate:'0.00'}}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="echarts-box">
                      <div class="echarts-title">
                        <div class="echarts-2-b">
                          <div class="echarts-title-content">车辆故障信息</div>
                        </div>
                      </div>
                      <div class="echarts-box-content carAllInfo">
                          <div class="carAllInfo-content">
                            <div class="table">
                              <div class="thead dt-flex">
                                <span class="dt-flex__item_2">车牌号</span>
                                <span class="dt-flex__item_2">故障等级</span>
                                <span class="dt-flex__item_3">上报时间</span>
                              </div>
                              <div class="tbody" id="sliderTable">
                                <div>
                                  <a href="javascript:;" class="dt-flex" v-for="(item,index) in alarmInfo" @click="faults(item)">
                                    <span class="dt-flex__item_2">{{item.plateNo}}</span>
                                    <span class="dt-flex__item_2">{{item.hAlarmLevel?item.hAlarmLevel+"级故障":"围栏报警"}}</span>
                                    <span class="text-navy dt-flex__item_3">{{item.uploadTime}}</span>
                                  </a>
                                </div>
                              </div>
                            </div>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
          </div>
        </div>
   </div>
  </div>
  <!-- import JavaScript -->
  <script src="../js/ApiRequest.js"></script>
  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <script type="text/javascript" src="../plugins/UpDownSlider/jquery.liMarquee.js"></script>
  <script>
    var parentOrigin = null,$dowebok=null;
    var vm = new Vue({
      el: '#tbb',
      data: function() {
        return { 
          srcS:true,
          srcU:"../img/ico/openFull.png",
          WSData:{},
          setTimeData:{},
          alarmInfo:{},//车辆故障信息
          // 
          map:"",
          bar:"",
          line:"",
          // 
          myChartBar:"",
          myChartLine:"",
          myChartMap:"",
          // 
          optionBar:"",
          optionLine:"",
          optionMap:"",
        }
      },
      mounted: function () {
        this.$nextTick(function () {
          this.webSocket()
          // 
          this.map = document.getElementById('map')
          this.bar = document.getElementById('bar')
          this.line = document.getElementById('line')
          // 
          this.resizeChart()
          this.init()
          // 定时获取大屏数据
          this.firstTimePost()
          this.setTimePost()
        })
      },
      methods: {
        fullChange:function(){//切换全屏
          this.srcS = !this.srcS
          if(this.srcS){
            this.srcU = "../img/ico/openFull.png";
            fullExit()
          }else{
            this.srcU = "../img/ico/closeFull.png";
            fullOpen()
          }
        },
        faults:function(item){//故障详情
          var type = storageLocal.get('fault');
          if(type){
            storageLocal.set('faults', item);
          }
        },
        resizeChart:function(){//reset echarts
          var appPie = document.getElementById('resizePie').offsetWidth;
          var appMap = document.getElementById('resizeMap').offsetWidth;
          var windowHeight = window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight;
          var changeH = $('.echarts-head').height();
          var reference = (windowHeight-changeH)/2 - 90;
          this.bar.style.width = (appPie - 40) + 'px';
          this.bar.style.height = (reference - windowHeight/8) + 'px';
          this.line.style.width = (appPie - 40) + 'px';
          this.line.style.height = (reference - windowHeight/8) + 'px';

          this.map.style.width = (appMap - 40) + 'px';
          this.map.style.height = (reference + windowHeight/7) + 'px';

          document.querySelector(".carCountInfo").style.height = (reference + windowHeight/15) + 'px';
          document.querySelector(".carAllInfo-content").style.height = (reference - windowHeight/20) + 'px';

          var high = (reference - windowHeight/20 -30);
          $('#sliderTable').height(high);
        },
        initEcharts:function(){//init echarts
          this.myChartBar = echarts.init(this.bar);
          this.myChartLine = echarts.init(this.line);
          this.myChartMap = echarts.init(this.map);
        },
        init:function(){
          this.initEcharts()
          // 
          this.showMap()
          this.showPercentage()
          this.showOnline()
        },
        liMarquee:function(){
          if($dowebok){
            setTimeout(function(){
              $dowebok.liMarquee('update');
              $(".str_move.str_origin").css("top","")
            },0)
          }else{
            setTimeout(function(){
              $dowebok = $('#sliderTable').liMarquee({direction: 'up',scrollamount:20,runshort: false});
            },0)
          }
        },
        showMap:function(){// 热力图
          this.optionMap = {
            title:{
              text:'',
            },
            backgroundColor:'',
            visualMap:{
              min:0,
              max:2,
              // splitNumber:2,
              show:false,
              inRange:{
                color:['#d94e5d','#eac736','#50a3ba'].reverse()
              },
              textStyle:{
                color:'#fff'
              }
            },
            geo:{
              map:'china',
              zoom:1.2,
              label:{
                fontSize:'18',
                emphasis:{
                  color:"#ffffff",
                  show:true
                }
              },
              roam:true,
              itemStyle:{
                normal:{
                  areaColor:'#323c48',
                  borderColor:'#111'
                },
                emphasis:{
                  areaColor:'#2a333d'
                }
              }
            },
            series:[{
              name:'AO',
              type:'heatmap',
              coordinateSystem:'geo',
              data:[]
            }]
          }
          this.myChartMap.setOption(this.optionMap);
          //获取地区传给index.html
          this.myChartMap.on('click', function(params){
            var data = {name:params.name,allPoint:vm.optionMap.series[0].data}
            storageLocal.set('map', data);
          });
        },
        showPercentage:function(){// 一周车辆上线率
          this.optionBar = {
              title: {
                  text: ''
              },
              toolbox:{
                show : false
              },
              grid:{
                left: '10%',
                right: '5%',
                bottom: '20%',
                top:'5%',
              },
              borderColor:"#000",
              xAxis: [{
                type : 'category',
                data : [],
                axisLabel:{
                  textStyle:{
                    color:'#ccc'
                  }
                },
                axisLine:{                 //坐标 轴线
                  show:true,             //是否显示坐标轴轴线
                  lineStyle:{
                    color:"#ccc",
                  }
                },
                axisTick :{
                  show:false
                },
                splitLine: {
                  show: false
                }
              }
              ],
              yAxis: {
                min:0,
                max:100,
                splitNumber:5,  
                axisLabel:{
                  textStyle:{
                    color:'#ccc'
                  }
                },
                splitLine:{
                  show:true,
                  lineStyle:{
                    color:"rgba(35,49,75,0.6)",    
                  }
                }
              },
              tooltip: {},
              series: [{
                  name: '',
                  type: 'bar',
                  data: [],
                  barWidth: 15,//固定柱子宽度
                  itemStyle:{
                    normal:{
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#58ffff'
                      }, {
                          offset: 1,
                          color: '#2e8ec7'
                      }]),
                      shadowColor: 'rgba(0, 0, 0, 0.4)',
                      shadowBlur: 20,
                      label:{
                        color: 'rgba(0,0,0,0.05)',
                        show:true,
                        position:'top',
                        textStyle: {  
                            fontWeight:'bolder',  
                            fontSize : '12',  
                            fontFamily : '微软雅黑', 
                            color:'#ffffff' 
                        }  
                      }
                    }
                  }
                }
              ]
          };
          this.myChartBar.setOption(this.optionBar);
        },
        showProportion:function(){// 入网车型比例
          this.optionPie = {
              title: {
                  text: ''
              },
              legend: {
                orient: 'vertical',
                right: 0,
                top: 20,
                bottom: 20,
                // data:["微型","小型","紧凑型","中型","中大型","大型","SUV","MPV","跑车"],
                textStyle:{
                  color:"#ccc"
                }
              },
              color:['#00186a', '#032370','#052f75','#083a7b','#0b4580','#0d5086','#105c8b','#126791','#157296'] ,
              tooltip: {},
              series: [{
                  name: '',
                  type: 'pie',
                  radius: '55%',
                  // roseType: 'angle',
                  label:{
                    textStyle:{
                      color:"#ccc"
                    }  
                  },
                  data: [{name:'55',value:'123'},{name:"紧凑型",value:"100"}].sort(function (a, b) { return a.value - b.value; }),
                  animationType: 'scale',
                  animationEasing: 'elasticOut',
                  animationDelay: function (idx) {
                      return Math.random() * 200;
                  }
              }]
          };
          this.myChartPie.setOption(this.optionPie);
        },
        showOnline:function(){// 车辆实时在线数量
          this.optionLine = {
            title:{
              text:"",
              subtext:""
            },
            tooltip:{
              trigger: 'axis',
              axisPointer: {
                  type: 'cross',
                  label: {
                      backgroundColor: '#283b56'
                  }
              }
            },
            grid:{
              left: '10%',
              right: '5%',
              bottom: '20%',
              top:'5%',
            },
            legend:{
              // data:['最新的data']
            },
            toolbox:{},
            dataZoom:{
              show:false,
              start:0,
              end:100
            },
            xAxis:[{
              type:'category',
              bounderGap:true,
              axisLabel:{
                textStyle:{
                  color:'#ccc'
                },
                rotate: -20
              },
              axisLine:{                 //坐标 轴线
                show:true,             //是否显示坐标轴轴线
                lineStyle:{
                  color:"#ccc",
                }
              },
              axisTick :{
                show:false
              },
              splitLine: {
                show: false
              },
              data:[]
            }],
            yAxis:[{
              type:'value',
              // scale:true,
              name:"",
              bounderGap:[0.2,0.2],
              minInterval:1,
              axisLabel:{
                textStyle:{
                  color:'#ccc'
                },
                lineStyle:{
                  color:"rgba(204,204,204,0.2)",    
                }
              },
              axisLine:{                 //坐标 轴线
                show:true,             //是否显示坐标轴轴线
                lineStyle:{
                  color:"rgba(204,204,204,0.2)",
                }
              },
              splitLine:{
                show:true,
                lineStyle:{
                  color:"rgba(204,204,204,0.2)",    
                }
              }
            }],
            series:[{
              name:'',
              type:'line',
              center : ['100%', '100%'],
              smooth:true,
              areaStyle:{
                color:"rgba(17,80,122,0.6)",
              },
              lineStyle:{
                color:"rgba(0, 156, 255,0.4)",
              },
              itemStyle:{
                normal:{
                  color:"rgba(17,80,122,0.6)"
                }
              },
              data:[]
            }]
          };
          
          this.myChartLine.setOption(this.optionLine);
        },
        webSocket:function(){
          if("WebSocket" in window){
            var ws = new WebSocket(apiUrl.wsW);
            ws.onopen = function(evt) { 
              console.log("Connection open ..."); 
              ws.send("Hello WebSockets!");
              // vm.$loading({background: 'rgba(0, 0, 0, 0.6)'});
            };
            ws.onmessage = function(evt) {
              // vm.$loading({background: 'rgba(0, 0, 0, 0.2)'}).close()
              if(evt.data == "请重新登录！"){
                vm.$message({
                  showClose: true,
                  message: evt.data,
                  duration: 1000,
                  type: 'error',
                  onClose: function () {
                    window.parent.location.href = "./user-login.html"
                  }
                });
              }else{
                vm.WSData = JSON.parse(evt.data)
              }
              // ws.close(); 
            };
            ws.onclose = function(evt) {
              vm.$loading({background: 'rgba(0, 0, 0, 0.2)'}).close()
              console.log("Connection closed.");
            };
          }else{
            window.location.replace("/module/updatebrowser.html")
          }
        },
        firstTimePost:function(){//首次请求加载
          resourceRequst("/monitor/getMonitorData",{},function(res){
              vm.setTimeData = res
          },true)          
        },
        setTimePost:function(){
          setInterval(function(){
            resourceRequst("/monitor/getMonitorData",{},function(res){
                vm.setTimeData = res
            },true)            
          },1000*60*30)          
        }
      },
      watch:{
        WSData:function(){
          console.log("update...")
          
          // 更新实时在线数量
          var value = this.optionLine.series[0].data;
          var time = this.optionLine.xAxis[0].data;
          if(value.length>7){
            value.shift();
            time.shift();
            value.push(this.WSData.onlineVehicleCount.onlineCount);
            time.push(this.WSData.onlineVehicleCount.time.split(" ")[1]);
          }else{
            value.push(this.WSData.onlineVehicleCount.onlineCount);
            time.push(this.WSData.onlineVehicleCount.time.split(" ")[1]);
          }
          this.myChartLine.setOption(this.optionLine);
          // 更新车辆故障信息
          this.alarmInfo = this.WSData.alarmInfo;
          this.liMarquee()
        },
        setTimeData:function(){
          // 更新热力图 => allLocationInfo
          var mapAll = this.setTimeData.allLocationInfo,mapInAll=[]; 
          for(var i=0;i<mapAll.length;i++){
            var L = [];
            L.push(mapAll[i].lng);L.push(mapAll[i].lat);L.push(1);
            mapInAll.push(L)
          }
          this.optionMap.series[0].data = mapInAll;
          this.myChartMap.setOption(this.optionMap);
          
          // 更新一周上线柱状图 => loginRate
          var Rate = this.setTimeData.loginRate;
          var XRate = [],TRate=[]
          for(var i=0;i<Rate.length;i++){
            var week = "";
            var data = new Date(Rate[i].gmt_create);
            var day = data.getDay()
            switch (day) {
              case 0:week="周日";break
              case 1:week="周一";break
              case 2:week="周二";break
              case 3:week="周三";break
              case 4:week="周四";break
              case 5:week="周五";break
              case 6:week="周六";break
            }
            XRate.push(Rate[i].rate)
            TRate.push(week)
          }
          this.optionBar.series[0].data = XRate;
          this.optionBar.xAxis[0].data = TRate;
          this.myChartBar.setOption(this.optionBar);
          // 更新车型比例饼状图 => vehicleTypeDetail
          // this.optionPie.series[0].data = this.setTimeData.vehicleTypeDetail;
          // this.myChartPie.setOption(this.optionPie);
          storageLocal.set('pie', this.setTimeData.vehicleTypeDetail);
        }
      }
    })
    
    window.onresize = function () {//重置容器高宽
        vm.resizeChart();
        vm.myChartBar.resize();
        vm.myChartLine.resize();
        vm.myChartMap.resize();
    };
  </script>
</body>
</html>